<template>
    <div id="radar" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
// import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  type TitleComponentOption,
  LegendComponent,
  type LegendComponentOption
} from 'echarts/components';
import { RadarChart, type RadarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
// import { useChartsStore } from '@/stores/charts';
// const pinia = createPinia();
// const chartStore = useChartsStore(pinia)

echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer]);

type EChartsOption = echarts.ComposeOption<
  TitleComponentOption | LegendComponentOption | RadarSeriesOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})

let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
var chartDom = document.getElementById('radar')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;

option = {
    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
    title: {
        show: false,
        text: 'Radar Chart'
    },
    grid: {
        top: 60,
        left: 0,
        right: 0,
        bottom: 60,
        containLabel: true
    },
    legend: {
        left: 'left',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {color: '#fff'},
    },
    radar: [
        {
        indicator: props.data.indicatorDataList,
        //   center: ['75%', '50%'],
        shape: 'circle',
        radius: 90,
        axisName: {
            color: '#fff',
            backgroundColor: '#666',
            borderRadius: 3,
            padding: [3, 5]
        }
        }
    ],
    series: [
        {
        type: 'radar',
        //   radarIndex: 1,
        data: [
            {
            ...props.data.seriesDataList[0],
            symbol: 'rect',
            symbolSize: 12,
            lineStyle: {
                type: 'dashed'
            },
            label: {
                show: true,
                formatter: function (params: any) {
                return params.value as string;
                }
            }
            },
            {
                ...props.data.seriesDataList[1],
            areaStyle: {
                color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                    color: 'rgba(255, 145, 124, 0.1)',
                    offset: 0
                },
                {
                    color: 'rgba(255, 145, 124, 0.9)',
                    offset: 1
                }
                ])
            }
            }
        ]
        }
    ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>